<template>
  <ContentWrap>
    <div>
      <div class="title_styles">
        <div class="title_details">
          订单详情-完善资料
        </div>
<!--        <div class="reornum">-->
<!--          申请订单编号：{{orderId}}-->
<!--        </div>-->

      </div>


      <div class="userInformation">
        <div class="top_title">
          <div class="box_style"></div>
          <div class="title_font">完善资料</div>
          <p class="title_right"></p>
        </div>
        <div>
          <el-table :data="menuList" stripe style="width: 100%">
            <el-table-column prop="name" label="表单" style="width: 50%" />
            <el-table-column label="操作" style="width: 40%;">
              <template #default="scope">
              <el-button v-if="flow<=4" type="primary" style="width: 100px;background: #409eff" @click="goWrite(scope.row.id)">去编辑/保存</el-button>
                <el-button v-if="flow>=5" type="primary" style="width: 100px;background: #409eff" @click="goWrite(scope.row.id)" disabled>去编辑/保存</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <footer>
        <el-row class="mb-4">
<!--          <el-button type="primary" style="width:20%;background-color: #1677ff;-->
<!--    box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);"  @click="openForm('推荐产品', orderId)" v-if="flow<=4">转权证</el-button>-->
          <el-button type="primary" style="width:20%;background-color: #1677ff;
    box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);"  @click="openForm('推荐产品', orderId)" v-if="flow<=4">转权证</el-button>

          <el-button type="primary" :loading-icon="Eleme" loading  v-if="flow>=5">已转权证处理</el-button>
        </el-row>
      </footer>

    </div>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <ProductForm ref="formRef"  />

</template>


<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from 'vue-router';
import Footer from "@/layout/components/Footer/src/Footer.vue";
import ProductForm from './ProductForm.vue'
import * as UsersApi from "@/api/hutai/salesman";
import {Eleme} from "@element-plus/icons-vue";

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const loading = ref(true) // 列表的加载中

const route = useRoute();
const orderId = route.query.id
const flow = ref(0)


const menuList = reactive([
  { id: 1, name: '按揭房信贷' },
  { id: 2, name: '保单贷' },
  // { id: 3, name: '创业贴息贷款' },
  { id: 4, name: '工薪贷' },
  { id: 5, name: '公积金贷' },
  // { id: 6, name: '企业信用贷款' },
  { id: 7, name: '全款车按揭车信贷' },
  { id: 8, name: '商业商住楼写字楼厂房一抵押' },
  { id: 9, name: '商业商住楼写字楼二次抵押' },
  { id: 10, name: '商业写字楼按揭贷款' },
  { id: 11, name: '企业税贷' },
  { id: 12, name: '企业流水贷' },
  { id: 13, name: '企业发票贷' },
  { id: 14, name: '住宅按揭贷款' },
  { id: 15, name: '住宅抵押' },
  { id: 16, name: '住宅二次抵押' }
])

const { push } = useRouter()
const goWrite = (id) => {
  push({
    path:'salesmanaddInformtion',
    query:{id:id,orderId:orderId}
  })
}

/** 查询列表 */
const getList = async () => {
  try {
    const data = await UsersApi.getSalesmanWarrantOrderInfo(orderId)
    flow.value = data.recordRespVO.flowN
    console.log(flow)
  } finally {
  }
}


/** 初始化 **/
onMounted(() => {
  getList()
});
</script>


<style lang="scss">
.barsName{
  font-weight: bold;
}

.inputs{
  width: 210px;
  padding: 10px;
}

.el_img {
  width: 15px;
  height: 15px;
}

//.order_div1 {
//  position: absolute;
//  display: flex;
//  width: 80%;
//  height: 70px;
//  margin-top: 170px;
//  margin-left: 20px;
//  justify-content: left;
//
//  .title_styles {
//    width: 100px;
//    height: 30px;
//    padding-top: 30px;
//    margin-top: 10px;
//    border: 1px rgb(240 240 240) solid;
//  }
//}

.order_div {
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 20px;
  margin-left: 20px;
  justify-content: left;

  .title_styles {
    width: 100px;
    height: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border-bottom: 1px solid #d9d9d9;
  }
}

.steps_style {
  flex-wrap: wrap;

  el-step {
    width: 1000px;
  }
}

.information_item_style {
  flex-wrap: wrap;
  width: 250px;
  margin-top: 10px;
}

.bottom_div {
  display: flex;
  margin-top: -120px;

  .bottom_table {

  }

  .bottom_box {
    width: 120px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    border: 1px solid rgb(245 245 245);
  }
}

.title_fonts {
  font-size: 10px;
}

.insureData_style {
  display: flex;
  font-size: 10px;

  .img_style {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-right: 5px;
  }

  .mid_font {
    font-size: 10px;
    font-weight: 900;
    color: rgb(237 109 75);
    text-decoration: underline;
  }
}

.mid_div {
  width: 150px;
  height: 90px;
  padding-top: 10px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  text-align: center;

  .mid_font {
    margin-top: 10px;
    font-size: 15px;
  }

  .img_style {
    width: 40px;
    height: 40px;
  }
}

.img_style {
  width: 15px;
  height: 15px;
}

.cell-item {
  display: flex;
  color: black;
  align-items: center;
}

.margin-top {
  width: 98%;
  margin: 0 auto;
}

.el-descriptions {
  margin-top: 10px;
}

.userInformation {
  width: 96%;
  min-height: 100px;
  padding: 0 0 20px;
  margin: 0 auto;
  margin-bottom: 1.5%;
  background-color: white;
  border-radius: 4px;

  .top_title {
    //padding-top: 20px;
    display: flex;
    //justify-content: space-between;
  }

  .write{
    display: flex;
    padding: 10px 20px;
    justify-content: space-between;
  }

  .title_right {
    width: 200px;
    font-size: 12px;
  }

  .title_font {
    width: 80%;
    margin: 6px 10px 10px;
    font-size: 16px;
    font-weight: 500;
  }

  .box_style {
    width: 2px;
    height: 15px;
    margin: 10px 0 0 10px;
    background-color: #2d8cf0;
  }
}

.title_styles {
  display: flex;
  width: 100%;
  padding: 20px;
  margin-bottom: 2%;
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;

  .title_details {
    width: 50%;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
  }

  .reornum {
    width: 50%;
    padding-right: 100px;
    font-size: 13px;
    text-align: right;
  }
}

.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  padding: 8px 11px;
  border: var(--el-descriptions-table-border);
}

.istyle{
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    .el-input__inner {
      -webkit-text-fill-color: inherit;
      color: inherit;
      cursor: text;
    }

    .el-input__suffix {
      display: none;
    }
  }
}



</style>
